<template>
	<view class="container">
		<!-- <NavigationBar backgroundColor="rgba(0,0,0,0)">
			<template #left></template>
			<template>剩余时间{{countTime}}</template>
			<template #right></template>
		</NavigationBar> -->
		<view class="top">
			剩余时间{{countTime}}
		</view>
		<scroll-view class="scroll-view" scroll-y="true">
			<view class="header">
				<view class="type">
					{{getType(list[currentIndex]?.type)}}
				</view>
				<view class="question">
					{{list[currentIndex]?.title}}
				</view>
			</view>
			<view class="content" v-if="list[currentIndex]">
				<view class="item" v-for="(item,index) in list[currentIndex].options" :key="index" @tap="select(item)">
					<view v-if="list[currentIndex].type==3" :class="item.checked?'checkbox red':'checkbox'">
						<view class="left">
							{{item.name}}
						</view>
						<u-icon name="checkmark" color="#2E87FF" :size="58"></u-icon>
					</view>
					<view v-else :class="item.flag==2?'letter red':item.flag==1?'letter blue':'letter'">
						<view class="left">
							{{item.name}}
						</view>
						<u-icon v-if="item.flag==2" name="close" color="#FF4A6D" :size="50"></u-icon>
						<u-icon v-if="item.flag==1" name="checkmark" color="#2E87FF" :size="50"></u-icon>
					</view>
				</view>
			</view>
			<view v-if="params.questionResult[currentIndex]&&params.questionResult[currentIndex].result!=0"
				class="analysis">
				<view class="top">
					<image src="https://q-api.lanbeiduo.com/api/file/download/FOpRWwKl5l_解析.png" mode="" class="icon">
					</image>
					<view class="title">
						题目解析
					</view>
				</view>
				<view class="text">
					{{list[currentIndex].analysis}}
				</view>
			</view>
		</scroll-view>

		<view class="bottom" @tap="showPop">
			<view class="left">
				<view class="correct">
					<view class="icon">
						<u-icon name="checkmark" color="#fff" :size="30"></u-icon>
					</view>
					<view class="num">
						{{correctNum}}
					</view>
				</view>
				<view class="incorrect">
					<view class="icon">
						<u-icon name="close" color="#fff" :size="30"></u-icon>
					</view>
					<view class="num">
						{{inCorrectNum}}
					</view>
				</view>
				<view class="page">
					<view class="icon">
						<u-icon name="list" color="#fff" :size="30"></u-icon>
					</view>
					<view class="num">
						{{currentIndex+1}}/100
					</view>
				</view>
				<view class="btn1" @tap.stop="prev">
					上一题
				</view>
				<view class="btn2" @tap.stop="next">
					下一题
				</view>
			</view>
			<view class="right">
				<!-- <image src="https://q-api.lanbeiduo.com/api/file/download/CSV5n3mYWX_收藏.png" mode="" class="collect">
				</image> -->
				<view class="btn" @tap.stop="submit(1)">
					交卷
				</view>
			</view>
		</view>
		<u-popup :show="show" :round="10" @close="close" closeable class="popup">
			<view class="popup">
				<view class="title">
					答题卡
				</view>
				<view class="top">
					<view class="left">
						<view class="correct">
							<view class="icon">
								<u-icon name="checkmark" color="#fff" :size="30"></u-icon>
							</view>
							<view class="num">
								{{correctNum}}
							</view>
						</view>
						<view class="incorrect">
							<view class="icon">
								<u-icon name="close" color="#fff" :size="30"></u-icon>
							</view>
							<view class="num">
								{{inCorrectNum}}
							</view>
						</view>
					</view>
					<view class="right" @tap="reset">
						清空记录
					</view>
				</view>
				<view class="pop-content">
					<scroll-view scroll-y="true" class="scroll-Y">
						<view class="nums">
							<view v-for="(item,index) in total" :key="index"
								:class="params.questionResult[index]?.result==2?'num red':params.questionResult[index]?.result==1?'num blue':'num'">
								{{item}}
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</u-popup>
		<u-modal :show="showModel" showCancelButton confirmText="交卷" cancelText="继续答题" @confirm="submit"
			@cancel="showModel=false">
			<view class="">
				<countDown ref="down" :widths='300' :breadth='30' activeColor='#2E87FF' defaultColor='#EDF0F0'
					v-model:times='times' :progress_time='progress_time' @endTime='endTime'>
					<view class="" style="text-align: center;">
						<view style="color: #778899;">目前得分</view>
						<view class="" style="margin-top: 20rpx;font-weight: bold;font-size: 34rpx;">
							{{correctNum}}分
						</view>
					</view>
				</countDown>
				<view class="" style="margin-top: 20rpx;">
					成绩不合格,确定交卷吗?
				</view>
			</view>
		</u-modal>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted,
		unref,
		toRaw,
		toRefs,
		nextTick,
		computed
	} from 'vue'
	import {
		onInit,
		onLoad,
		onReady,
		onShow,
		onHide,
		onUnload,
		onResize,
	} from '@dcloudio/uni-app'
	import {
		$http,
		toLogin
	} from "@/common"
	import NavigationBar from "@/components/NavigationBar/NavigationBar.vue"
	const currentIndex = ref(0)
	const progress = ref(50)
	const times = ref(100)
	const progress_time = ref(1)
	const down = ref()
	const endTime = () => {
		console.log('结束');
	}
	const list = ref([

	])
	let params = ref({
		questionResult: [],
		type: 2
	})
	let pageNumber = 1
	let pageSize = 100
	let total = ref(0)
	const countTime = ref('')
	const correctNum = computed(() => {
		return params.value.questionResult.filter(item => item.result == 1).length
	})
	const inCorrectNum = computed(() => {
		return params.value.questionResult.filter(item => item.result == 2).length
	})
	let totalSeconds = 7200; // 120分钟 = 7200秒
	onLoad(() => {
		// if (uni.getStorageSync('currentIndex')) {
		// 	currentIndex.value = uni.getStorageSync('currentIndex')
		// }
		// if (uni.getStorageSync('total')) {
		// 	total.value = uni.getStorageSync('total')
		// }
		// if (uni.getStorageSync('list')) {
		// 	list.value = JSON.parse(uni.getStorageSync('list'))
		// }
		// if (uni.getStorageSync('params')) {
		// 	params.value = JSON.parse(uni.getStorageSync('params'))
		// }
		// if (uni.getStorageSync('pageNumber')) {
		// 	pageNumber = uni.getStorageSync('pageNumber')
		// }
		// if (list.value.length == 0) {
		getData()
		//}
		let intervalId = setInterval(function() {
			if (totalSeconds > 0) {
				let minutes = Math.floor(totalSeconds / 60);
				let seconds = totalSeconds % 60;
				// 格式化时间为 MM:SS
				countTime.value = `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
				totalSeconds--;
			} else {
				clearInterval(intervalId); // 停止倒计时
				console.log("倒计时结束！");
			}
		}, 1000);
	})
	onShow(() => {

	})
	onUnload(() => {
		//console.log(params, list.value, 'params')
		// uni.setStorageSync('currentIndex', currentIndex.value)
		// uni.setStorageSync('total', total.value)
		// uni.setStorageSync('list', JSON.stringify(list.value))
		// uni.setStorageSync('params', JSON.stringify(params.value))
		// uni.setStorageSync('pageNumber', pageNumber)
	})

	function prev() {
		if (currentIndex.value == 0) {
			return
		}
		currentIndex.value--
	}

	function getData() {
		$http.get("questionExam").then(res => {
			console.log(res, 'ddd')
			total = res.length
			if (res) {
				res.forEach(item => {
					item.hasAnswer = false
					params.value.questionResult.push({
						questionId: item.id,
						result: 0,
						userAnswer: ''
					})
					item.options = JSON.parse(item.options).map(m => {
						return {
							name: m,
							checked: false
						}
					})
				})
			}
			list.value = list.value.concat(res)
			console.log(list.value, 'list.value')
		})
	}

	function getType(val) {
		const arr = ['', '单选题', '判断题', '多选题']
		return arr[val]
	}

	function select(item) {
		if (params.value.questionResult[currentIndex.value].result != 0) {
			return
		}
		if (list.value[currentIndex.value].type != 3) { //多选
			if (JSON.parse(list.value[currentIndex.value].answer)[0] == item.name.split(' ')[0]) {
				params.value.questionResult[currentIndex.value].result = 1
				item.flag = 1
				list.value[currentIndex.value].options.forEach(m => {
					m.checked = false
				})
				item.checked = !item.checked
				params.value.questionResult[currentIndex.value].userAnswer = item.name.split(' ')[0]
				currentIndex.value + 1 < total && currentIndex.value++
			} else {
				item.flag = 2
				params.value.questionResult[currentIndex.value].result = 2
				list.value[currentIndex.value].options.forEach(m => {
					if (JSON.parse(list.value[currentIndex.value].answer)[0] == m.name.split(' ')[0]) {
						m.flag = 1
					}
					m.checked = false
				})
				item.checked = !item.checked
				params.value.questionResult[currentIndex.value].userAnswer = item.name.split(' ')[0]
			}
			//list.value[currentIndex.value].hasAnswer = true
		} else {
			item.checked = !item.checked
			let res = list.value[currentIndex.value].options.filter(m => m.checked).map(n => {
				return n.name.split(' ')[0]
			})
			console.log(res, 'res')
			if (res.length == 0) {
				params.value.questionResult[currentIndex.value].result = 0
			} else {
				params.value.questionResult[currentIndex.value].result = arraysContainSameElements(res, JSON.parse(list
					.value[
						currentIndex.value].answer)) ? 1 : 2
			}
			//todo 判断多选的情况
		}
		console.log(params.value, 'bbbb')
	}

	function arraysContainSameElements(arr1, arr2) {
		return new Set(arr1).size === new Set(arr2).size &&
			new Set([...arr1, ...arr2]).size === new Set(arr1).size;
	}

	function reset() {
		uni.showModal({
			title: '提示',
			content: '您确定要清空当前做题记录并重新开始吗?',
			success: function(res) {
				if (res.confirm) {
					currentIndex.value = 0
					pageNumber = 1
					total.value = 0
					list.value = []
					params.value = {
						questionResult: [],
						type: 2
					}
					show.value = false
					getData()
				} else if (res.cancel) {
					console.log('用户点击取消');
				}
			}
		})
	}

	function next() {
		console.log(params.value, 'bbbb')
		if (params.value.questionResult[currentIndex.value].result != 0) { //0代表没有答题
			list.value[currentIndex.value].hasAnswer = true
		}
		currentIndex.value + 1 < total && currentIndex.value++
	}
	const show = ref(false)

	function close() {
		show.value = false
	}

	function showPop() {
		show.value = true
	}
	const showModel = ref(false)

	function openModel() {
		showModel.value = true
	}

	function submit(val) {
		console.log(params.value.questionResult, list.value, 'bbbb')
		if (correctNum.value < 70 && val == 1) {
			openModel()
			return
		}
		let param = {
			questionResult: params.value.questionResult.filter(item => item.result != 0),
			type: 2
		}
		if (param.questionResult.length == 0) {
			uni.showToast({
				title: '请选择答案!',
				icon: 'none'
			})
			return
		}
		$http.post("questionSubmit", param).then(res => {
			console.log(res, 'dre')
			uni.showToast({
				title: '提交成功!',
				icon: 'none'
			})
			showModel.value = false
			res.totalSeconds = totalSeconds
			uni.redirectTo({
				url: "/pages/home/result?params=" + JSON.stringify(res)
			})
		})
	}
</script>

<style lang="scss" scoped>
	.container {
		height: 100%;
		background-color: #F9F9F9;

		.top {
			height: 50rpx;
			line-height: 50rpx;
			text-align: center;
			font-weight: bold;
		}

		.scroll-view {
			height: calc(100vh - 200rpx);
		}

		.swiper {
			height: 86vh;
			padding: 20rpx;
		}

		.header {
			padding: 20rpx 10rpx;
			display: flex;

			.type {
				width: 90rpx;
				height: 40rpx;
				font-size: 22rpx;
				font-weight: bold;
				background-color: #E5EDFA;
				color: #2E87FF;
				border-top-right-radius: 10rpx;
				border-top-left-radius: 10rpx;
				border-bottom-right-radius: 10rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-right: 16rpx;
			}

			.question {
				flex: 1;
			}
		}

		.content {
			padding: 20rpx;

			.item {
				margin-bottom: 28rpx;

				.letter {
					background-color: #fff;
					border-radius: 20rpx;
					padding: 20rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
				}

				.checkbox {
					background-color: #fff;
					border-radius: 20rpx;
					padding: 20rpx;
				}

				.red {
					background-color: #F8E3E8;
					color: #FF4A6D;
				}

				.blue {
					background-color: #E5EDFA;
					color: #2E87FF;
				}

				.text {
					flex: 1;
					margin-top: 6rpx;
				}
			}
		}

		.analysis {
			background-color: #fff;
			padding: 20rpx;

			.top {
				display: flex;
				align-items: center;
				margin-bottom: 10rpx;

				.icon {
					width: 50rpx;
					height: 50rpx;
				}

				.title {
					font-weight: bold;
					font-size: 32rpx;
				}
			}

			.text {
				line-height: 1.6;
				text-align: justify;
			}
		}

		.bottom {
			position: fixed;
			bottom: 0;
			width: 100%;
			height: 150rpx;
			background-color: #fff;
			display: flex;
			padding: 20rpx 10rpx;
			justify-content: space-between;
			align-items: center;

			.left {
				display: flex;
				align-items: center;

				.correct {
					display: flex;
					align-items: center;

					.icon {
						width: 34rpx;
						height: 34rpx;
						border-radius: 12rpx;
						background-color: #4082FC;
						display: flex;
						justify-content: center;
						align-items: center;
						margin-right: 6rpx;
					}
				}

				.incorrect {
					display: flex;
					align-items: center;
					margin: 0 10rpx;

					.icon {
						width: 34rpx;
						height: 34rpx;
						border-radius: 12rpx;
						background-color: #F22341;
						display: flex;
						justify-content: center;
						align-items: center;
						margin-right: 6rpx;
					}
				}

				.btn1 {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 140rpx;
					height: 50rpx;
					background-color: #1867E8;
					color: #fff;
					margin: 0 10rpx;
					border-radius: 10rpx;
				}

				.btn2 {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 140rpx;
					height: 50rpx;
					background-color: #1867E8;
					color: #fff;

					border-radius: 10rpx;
				}

				.page {
					display: flex;
					align-items: center;

					.icon {
						width: 34rpx;
						height: 34rpx;
						border-radius: 12rpx;
						background-color: #C1C6CC;
						display: flex;
						justify-content: center;
						align-items: center;
						margin-right: 6rpx;
					}
					.num{
						font-size: 26rpx;
					}
				}
			}

			.right {
				display: flex;
				align-items: center;

				.btn {
					width: 140rpx;
					height: 50rpx;
					border-radius: 10rpx;
					font-weight: bold;
					display: flex;
					justify-content: center;
					align-items: center;
					background-color: #1667EA;
					color: #fff;

				}
			}

			.collect {
				width: 36rpx;
				height: 36rpx;
				margin: 0 10rpx;
			}
		}

		.popup {
			padding: 20rpx 0;

			.title {
				padding: 0rpx 20rpx;
				font-weight: bold;
				font-size: 34rpx;
				text-align: center;
			}

			.top {
				padding: 0rpx 40rpx;
				display: flex;
				justify-content: space-between;
				margin: 20rpx 0 30rpx 0;

				.left {
					display: flex;
					align-items: center;

					.correct {
						display: flex;
						align-items: center;

						.icon {
							width: 44rpx;
							height: 44rpx;
							border-radius: 12rpx;
							background-color: #4082FC;
							display: flex;
							justify-content: center;
							align-items: center;
							margin-right: 6rpx;
						}
					}

					.incorrect {
						display: flex;
						align-items: center;
						margin: 0 10rpx;

						.icon {
							width: 40rpx;
							height: 40rpx;
							border-radius: 12rpx;
							background-color: #F22341;
							display: flex;
							justify-content: center;
							align-items: center;
							margin-right: 6rpx;
						}
					}
				}

				.right {
					background-color: #F8F9FB;
					width: 160rpx;
					height: 54rpx;
					border-radius: 28rpx;
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}

			.pop-content {
				padding: 0rpx 10rpx;

				.scroll-Y {
					height: 800rpx;

					.nums {
						display: flex;
						flex-wrap: wrap;

						.num {
							width: 100rpx;
							height: 100rpx;
							margin: 16rpx 10rpx;
							border-radius: 50%;
							background-color: #F8F9FB;
							display: flex;
							justify-content: center;
							align-items: center;
						}

						.red {
							background-color: #F8E3E8;
							color: #FF4A6D;
						}

						.blue {
							background-color: #E5EDFA;
							color: #2E87FF;
						}
					}
				}
			}
		}
	}
</style>